Mastering CSS Selectors and Specificity

Published 3 months ago

CSS (Cascading Style Sheets) is the backbone of modern web design, allowing developers to style HTML elements effectively. One of the most fundamental aspects of CSS is selectors—they define which elements a style rule applies to. Alongside selectors, understanding CSS specificity ensures that styles are applied as intended. In this blog, we will explore various CSS selectors and the concept of specificity.

1. Basic Selectors

CSS offers several basic selectors that target HTML elements efficiently.

a) Element (Type) Selector

The element selector applies styles to all instances of a specified HTML tag.

p {
  color: blue;
  font-size: 16px;
}

This rule applies to all <p> elements, setting their text color to blue and font size to 16px.

b) Class Selector (`.`)

The class selector targets elements assigned a specific class attribute.

.text-highlight {
  background-color: yellow;
  font-weight: bold;
}

This rule applies to any element with the class text-highlight, giving it a yellow background and bold text.

Usage in HTML:

<p class="text-highlight">This text is highlighted.</p>

c) ID Selector (`#`)

The ID selector targets a unique element with a specific ID.

#main-heading {
  font-size: 24px;
  text-align: center;
}

Usage in HTML:

<h1 id="main-heading">Welcome to My Website</h1>

Note: IDs should be unique on a page, unlike classes, which can be reused.

2. Grouping and Universal Selectors

a) Grouping Selector (`,`)

This selector applies the same styles to multiple elements, reducing redundancy.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

This rule applies the same font to all <h1>, <h2>, and <h3> elements.

b) Universal Selector (`*`)

The universal selector applies styles to all elements on a page.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This resets default margin and padding for all elements, ensuring consistent styling.

3. Attribute Selectors

Attribute selectors target elements based on their attributes and values.

input[type="text"] {
  border: 1px solid black;
  padding: 5px;
}

This rule applies only to text input fields (<input type="text">).

Other variations include:

/* Targets elements with an attribute */
a[target] {
  color: red;
}

/* Targets elements where attribute starts with "btn" */
button[class^="btn"] {
  background-color: green;
}

/* Targets elements where attribute contains "nav" */
div[class*="nav"] {
  border: 1px solid gray;
}

4. Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements allow styling elements based on their state or position.

a) Pseudo-classes

Pseudo-classes define special states of an element.

/* Change link color when hovered */
a:hover {
  color: orange;
}

/* Style the first child element */
p:first-child {
  font-weight: bold;
}

Other common pseudo-classes:

:focus (applies styles when an element is focused)
:nth-child(n) (targets the nth child of a parent)

b) Pseudo-elements

Pseudo-elements target specific parts of an element.

/* Add a red border before an element */
p::before {
  content: "📌 ";
  color: red;
}

/* Style the first letter of a paragraph */
p::first-letter {
  font-size: 2em;
  color: blue;
}

5. CSS Specificity and the Cascade

When multiple CSS rules apply to the same element, specificity determines which rule takes precedence.

Specificity Calculation

CSS assigns a weight to selectors:

Element selectors (e.g., p, div) → 1 point
Class selectors (e.g., .class, [attribute], :hover) → 10 points
ID selectors (e.g., #id) → 100 points
Inline styles (e.g., style="color: red;") → 1000 points
!important declaration overrides all other rules

Example of Specificity Conflict

p {
  color: black; /* Specificity: 1 */
}
.text {
  color: green; /* Specificity: 10 */
}
#main {
  color: blue; /* Specificity: 100 */
}

For the following HTML:

<p id="main" class="text">Hello World</p>

#main (100) overrides .text (10) and p (1), making the text blue.

The Cascade

If specificity is equal, the last defined rule applies.

h1 {
  color: red;
}
h1 {
  color: blue;
}

Since both rules have the same specificity, the last one (color: blue;) takes effect.

Using `!important`

p {
  color: red !important;
}

This makes color: red override all conflicting rules, regardless of specificity.

Conclusion

Mastering CSS selectors and specificity is crucial for writing efficient and maintainable styles. By understanding how different selectors work and how specificity affects the cascade, developers can avoid conflicts and apply styles effectively. Keep practising with different selectors, and you'll become a CSS expert in no time!

Obafemi Emmanuel